Files and Directories

1. Small File

If a file is small and specific to a single component, it should be placed inside the component's folder.

Perpuse of this is to prevent create a file for every component.

src/components/Button.tsx

import React from "react";

// ✅ Good
export interface PropsInterface {
  children: React.ReactNode;
  onClick: () => void;
  disabled?: boolean;
  variant?: 'primary' | 'secondary';
}

const Button = (props: PropsInterface) => {
    return <button>Click me</button>;

};

export default Button;

src/components/Button.tsx

import React from "react";

// ❌ Bad
export interface PropsInterface {
  children: React.ReactNode;
  onClick: () => void;
  disabled?: boolean;
  variant?: 'primary' | 'secondary';
}

export type ButtonPropsType = PropsInterface;

const Button = (props: ButtonPropsType) => {
    return <button>Click me</button>;

};

export default Button;

2. Large Files

Here is a standard structure for managing large files within a project. This setup is flexible and can be adapted based on the size and complexity of the project.

Notice

To maintain consistency and scalability in our project, we are introducing a dedicated file structure that is specifically designed for modules, components views.

2.1. Core Files

decide on a core file that will be the entry point for the component.

src/
├── components/
│   ├── Card/
│   |   ├── index.ts
│   |   ├── Card.tsx
│   |   ├── PrintableCard.tsx
│   |   ├── card-section/
│   |   |   ├── CardSection.tsx

2.2. Hooks

src/
├── components/
│   ├── Card/
│   |   ├── index.ts
│   |   ├── Card.tsx
│   |   ├── PrintableCard.tsx
│   |   ├── card-section/
│   |   |   ├── CardSection.tsx
│   |   ├── hooks/
│   |   |   ├── use-card.ts
│   |   |   ├── use-printable-card.ts
# Can use as a single file
│   |   ├── hooks.ts

2.3. Styles

src/
├── components/
│   ├── Card/
│   |   ├── index.ts
│   |   ├── Card.tsx
│   |   ├── PrintableCard.tsx
│   |   ├── card-section/
│   |   |   ├── CardSection.tsx
│   |   ├── styles/
│   |   |   ├── card-style.module.css
# Can use as a single file
│   |   ├── styles.module.css
│   |   ├── hooks/
│   |   |   ├── use-card.ts
│   |   |   ├── use-printable-card.ts

2.4. Tests

src/
├── components/
│   ├── Card/
│   |   ├── index.ts
│   |   ├── Card.tsx
│   |   ├── PrintableCard.tsx
│   |   ├── card-section/
│   |   |   ├── CardSection.tsx
│   |   ├── card-style.module.css
│   |   ├── tests/
│   |   |   ├── Card.test.tsx
│   |   |   ├── PrintableCard.test.tsx
│   |   |   ├── CardSection.test.tsx
# Can use as a single file
│   |   ├── Card.test.ts
|   |   ├── hooks/
|   |   |   ├── use-card.ts
|   |   |   ├── use-printable-card.ts

2.5. Types

src/
├── components/
│   ├── Card/
│   |   ├── index.ts
│   |   ├── Card.tsx
│   |   ├── PrintableCard.tsx
│   |   ├── card-section/
│   |   |   ├── CardSection.tsx
│   |   ├── card-style.module.css
│   |   ├── types.ts
│   |   ├── hooks/
│   |   |   ├── use-card.ts
│   |   |   ├── use-printable-card.ts

2.6. Utils

src/
├── components/
│   ├── Card/
│   |   ├── index.ts
│   |   ├── Card.tsx
│   |   ├── PrintableCard.tsx
│   |   ├── card-section/
│   |   |   ├── CardSection.tsx
│   |   ├── card-style.module.css
│   |   ├── types.ts
│   |   ├── utils/
│   |   |   ├── utils.ts
# Can use as a single file
│   |   ├── utils.ts
│   |   ├── hooks/
│   |   |   ├── use-card.ts
│   |   |   ├── use-printable-card.ts

2.7. Constants

src/
├── components/
│   ├── Card/
│   |   ├── index.ts
│   |   ├── Card.tsx
│   |   ├── PrintableCard.tsx
│   |   ├── card-section/
│   |   |   ├── CardSection.tsx
│   |   ├── card-style.module.css
│   |   ├── types.ts
│   |   ├── utils.ts
│   |   ├── constants/
│   |   |   ├── constants.ts
# Can use as a single file
│   |   ├── constants.ts
│   |   ├── hooks/
│   |   |   ├── use-card.ts
│   |   |   ├── use-printable-card.ts